<template>
  <div id="app" v-cloak>
    <!-- 骨架屏 -->
    <div v-if="loading" class="skeleton-container">
      <div class="skeleton-banner"></div>
      <div class="skeleton-inquiry"></div>
      <div class="skeleton-project"></div>
      <div class="skeleton-service"></div>
    </div>
    <div v-if="!loading" class="main-content">
      <!-- 轮播图部分 -->
      <HomeBanner :banner-data="banner_box" />

      <!-- 输入框 -->
      <div class="tracking-container">
        <input
          class="tracking-input"
          v-model="trackingNumber"
          :placeholder="$t('buttonInfo.trackingPlaceholder')"
          @keyup.enter="handleQuery"
        />
        <button class="tracking-button" @click="handleQuery">
          <span v-if="!queryLoading">{{$t('buttonInfo.query')}}</span>
          <i v-else class="el-icon-loading"></i>
        </button>
      </div>

      <!-- 加载状态 -->
      <div v-if="queryLoading" class="loading-container">
        <i class="el-icon-loading"></i>
        <span>{{$t('contentDetails.InSearch')}}...</span>
      </div>

      <!-- 物流信息表格 -->
      <div v-else-if="hasData" class="inquiry-wrapper">
        <div class="tit-line">
          <span class="tit-line1"></span>
          <span class="tit-line2"></span>
        </div>
        <div class="solve-box">
          <div class="solve-tit">{{$t('contentDetails.ReferenceNumber')}}</div>
          <div class="solve-submit">
            <span>{{trackingNumber}}</span>
          </div>
        </div>
        <div class="inquiry-form">
          <div class="info-table-container">
            <table class="logistics-table">
              <template v-if="Array.isArray(logisticsData) && logisticsData.length > 0">
                <template v-for="(item, index) in logisticsData" >
                  <tr>
                    <th>Type</th>
                    <td>{{item.busitype}}</td>
                  </tr>
                  <tr>
                    <th>Contanier</th>
                    <td>{{item.containerno}}</td>
                  </tr>
                  <tr>
                    <th>Departure Date</th>
                    <td>{{item.departuredate}}</td>
                  </tr>
                  <tr>
                    <th>Estimated Arrival Date (ETA)</th>
                    <td>{{item.estimatearrivadate}}</td>
                  </tr>
                  <tr>
                    <th>Actual Arrival Date (ATA)</th>
                    <td>{{item.actualarrivaldate}}</td>
                  </tr>
                  <tr>
                    <th>Status</th>
                    <td>{{item.statusname}}</td>
                  </tr>
                  <tr>
                    <th>Storage cost starting</th>
                    <td>{{item.storagecoststarting}}</td>
                  </tr>
                  <tr>
                    <th>Pick up Date</th>
                    <td>{{item.pickupdate}}</td>
                  </tr>
                  <tr v-if="index < logisticsData.length - 1" class="data-separator">
                    <td colspan="2"></td>
                  </tr>
                </template>
              </template>
            </table>
            <div class="tipps">
              <span style="white-space: pre-line;">{{$t('contentDetails.tableTipps')}}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <el-empty
        v-else-if="searched"
        :image="emptyImg"
        :image-size="400"
        description="未查询到相关物流信息"
      ></el-empty>

      <!-- 初始空状态 -->
      <el-empty
        v-else
        :image="emptyImg"
        :image-size="400"
        description="请输入追踪号码查询物流信息"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import { bannerList } from "@/api/banner/banner"
import {queryLogistics} from "@/api/logistics";
import HomeBanner from "./components/home/HomeBanner.vue";

export default {
  components: {HomeBanner},
  data() {
    return {
      loading: false,
      baseUrl: process.env.VUE_APP_BASE_API || '',
      banner_box: [],
      emptyImg: require("@/assets/asl_images/empty.webp"),
      trackingNumber: '',
      queryLoading: false,
      logisticsData: {},
      hasData: false,
      searched: false,
      imageCache: new Map() // 图片缓存
    }
  },
  created() {
    // 预加载空状态图片
    this.preloadEmptyImage();
    this.getBannerList();
  },
  methods: {
    /** 预加载空状态图片 */
    preloadEmptyImage() {
      const img = new Image();
      img.src = this.emptyImg;
      this.imageCache.set(this.emptyImg, img);
    },

    /** 查询轮播图 */
    getBannerList() {
      this.loading = true;
      bannerList(7).then(response => {
        this.banner_box = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    handleQuery() {
      if (!this.trackingNumber.trim()) {
        this.$message.warning(this.$t('contentDetails.PleaseEnterTheTrackingNumber'));
        return;
      }

      this.queryLoading = true;
      this.searched = true;

      queryLogistics(this.trackingNumber)
        .then(response => {
          if (response.status === 'ok' && response.data?.length > 0) {
            this.logisticsData = response.data;
            this.hasData = true;
          } else {
            this.hasData = false;
            this.$message.warning(response.errmsg || this.$('contentDetails.LogisticsInformationNotFound'));
          }
        })
        .catch(() => {
          this.hasData = false;
          this.$message.error(this.$('contentDetails.retry'));
        })
        .finally(() => {
          this.queryLoading = false;
        });
    }
  }
}
</script>

<style scoped lang="scss">
/* 保持原有样式不变 */
[v-cloak] {
  display: none;
}

.skeleton-container {
  width: 100%;
  min-height: 2000px;
}

/* 骨架屏动画 */
.skeleton-banner {
  height: 800px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* 新增全局过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active {
  animation: slide-up 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}



/// 无游览数据
::v-deep.el-empty p {
  display: none !important;
}

//追踪搜索
.tracking-container {
  display: flex;
  gap: 0;
  margin: 20px auto;
  max-width: 600px;
}

/* 输入框样式优化 */
.tracking-input {
  flex-grow: 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  font-size: 14px;
  transition: border-color 0.3s ease;

  &:focus {
    outline: none;
    border-color: #ff0201;
  }
}

/* 按钮样式优化 */
.tracking-button {
  background-color: #ff0201;
  padding: 12px 50px;
  border: 1px solid #ff0201;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: darken(#ff0201, 10%);
  }
}

// 加载状态
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
  color: #666;

  .el-icon-loading {
    font-size: 32px;
    margin-bottom: 10px;
    color: #ff0201;
    animation: rotating 2s linear infinite;
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 新增表格样式
.inquiry-wrapper {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.inquiry-form {
  background: white;
  box-shadow: 0 4px 12px rgba(254, 50, 49, 0.2);
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

.logistics-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;

  th, td {
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  tr:nth-child(odd) {
    background-color: #fff;
  }

  tr:nth-child(even) {
    background-color: #efefef;
  }

  th {
    width: 30%;
    color: #333;
    font-weight: 500;
    border-right: 1px solid #cdcdcd;
  }
}

.tit-line {
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
}

.tit-line1, .tit-line2 {
  height: 8px;
  background: #fe3231;
  border-radius: 10px;
}

.tit-line1 {
  width: 60px;
}

.tit-line2 {
  width: 10px;
  margin-left: 10px;
}

.solve-box {
  margin-bottom: 40px;
}

.solve-tit {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: left;
}

.solve-submit {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.solve-submit span {
  display: block;
  margin-bottom: 5px;
}
.tipps{
  background-color: #f7f9ff;
  padding: 30px;
}
</style>
